<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>支付</title>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      .layout {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #54bc6e;
        color: #FFF;
        font-size: 3rem;
        text-align: center;
        padding-top: 200px;
        font-weight: 500;
      }
    </style>
  </head>
  <body>
    <div id="error" class="layout">请在微信或支付宝中打开该链接</div>
    <div id="aliPay" class="layout">
      <div id="ali-text">等待支付</div>
    </div>
    <div id="wechat" class="layout">
      <img id="bg" src="https://i.loli.net/2020/11/14/5HwvDEQeG49BVsz.png" />
    </div>
    <script type="text/javascript">

       window.onload = function() {
        var ua = window.navigator.userAgent.toLowerCase();
        var emptyPage = document.getElementById("error");
        var wechat = document.getElementById("wechat");
        var aliPay = document.getElementById("aliPay");
        if(ua.indexOf('micromessenger') !== -1) {
          emptyPage.style.display = 'none'
          aliPay.style.display = 'none'
        } else if(ua.indexOf('alipayclient') !== -1) {
          emptyPage.style.display = 'none'
          wechat.style.display = 'none'
          window.location.href = 'HTTPS://QR.ALIPAY.COM/FKX02448DWZ2LX9YT5GW1F';
        } else {
          aliPay.style.display = 'none'
          wechat.style.display = 'none'
        }
       }
     </script>
  </body>
</html>
